<template>
  <div class="video">
    <div class="center-container">
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        :multiple="false"
        :before-upload="checkFormatAndSize"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传MP4文件，且不超过10GB</div>
      </el-upload>
      <el-button type="primary" @click="goToVideoPage" class="play-button">前往播放视频</el-button>
      <!-- 添加语音搜索按钮 -->
      <img class="centered-button" src="@/assets/eye.jpg" @click="startSpeechRecognition">
      <!-- 语音输入弹窗 -->
      <el-dialog title="语音搜索" :visible.sync="showVoiceInput" @close="stopSpeechRecognition" class="voice-dialog" center>
        <div class="voice-input-dialog">
          <el-icon class="voice-icon" name="el-icon-microphone"></el-icon>
          <div class="voice-text">{{ voiceInputStatus }}</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showVoiceInput: false, // 控制语音输入弹窗显示
      voiceInputStatus: '', // 语音输入状态信息
      stream: null // 存储音频流对象
    };
  },
  methods: {
    goToVideoPage() {
      this.$router.push('/play');
      console.log('前往播放视频页面');
    },
    startSpeechRecognition() {
      // 请求用户麦克风权限
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => { 
          // 创建音频上下文对象
          const audioContext = new (window.AudioContext || window.webkitAudioContext)();
          // 创建音频输入节点
          const source = audioContext.createMediaStreamSource(stream);
          // 创建音频分析器节点
          const analyser = audioContext.createAnalyser(); 
          // 将音频输入节点连接到音频分析器节点
          source.connect(analyser);
          // 设置分析器的参数
          analyser.fftSize = 256; 
          // 创建数据数组
          const dataArray = new Uint8Array(analyser.frequencyBinCount);
          // 显示语音输入弹窗
          this.showVoiceInput = true; 
          // 启动定时器，每隔一段时间更新声音强度
          setInterval(() => { 
            // 获取频域数据
            analyser.getByteFrequencyData(dataArray); 
            // 计算平均声音强度
            const average = dataArray.reduce((acc, cur) => acc + cur, 0) / dataArray.length;
            // 根据声音强度更新状态信息
            if (average > 0) {
              this.voiceInputStatus = '当前正在进行语音输入...';
            } else {
              this.voiceInputStatus = '未检测到声音，请大声一点';
            }
          }, 1000);
          // 2秒后显示搜索结果并跳转页面
          setTimeout(() => {
            this.voiceInputStatus = '语音转文字内容：我想要穿衣服';
            setTimeout(() => {
              // 进行页面跳转的逻辑
              this.stopSpeechRecognition(); // 关闭弹窗
              this.goToVideoPage(); // 跳转页面
            }, 2000);
          }, 3000);
          this.stream = stream; // 存储音频流对象
        })
        .catch(error => {
          console.error('获取麦克风权限失败:', error);
        });
    },
    stopSpeechRecognition() {
      // 关闭弹窗
      this.showVoiceInput = false;
      this.voiceInputStatus = '';
      // 停止对麦克风的使用
      if (this.stream) {
        this.stream.getTracks().forEach(track => track.stop());
      }
    }
  }
};
</script>



<style scoped>
/* 上传框和按钮样式 */
.upload-demo {
  width: 100%;
  height: 150px;
  margin-top: 10%;
  margin-bottom: 12%;
}

.play-button {
  width: 50%;
  margin: 20px auto;
}

.centered-button {
  width: 200px;
  height: 200px;
  margin-top: 20px;
}

/* 语音输入弹窗样式 */
.voice-dialog {
  max-width: 90%;
  margin: 0 auto; /* 让弹窗水平居中 */
  padding: 10px;
  text-align: center; /* 让弹窗内容居中 */
}

.voice-input-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-icon {
  font-size: 48px;
  color: #409EFF;
}

.voice-text {
  margin-left: 20px;
  font-size: 18px;
}

.main-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 85vh;
}

.centered-button {
  width: 300px;
  height: 300px;
}

@media (max-width: 768px) {
  .voice-dialog {
    max-width: 95%;
  }
}
</style>
